<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Discord Music Bot</title>
    <link rel="shortcut icon" href="/logo.gif" type="image/gif" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
      rel="stylesheet"
    />
    <style>
      @font-face {
        font-family: "Euclid Circular B Medium";
        src: url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.eot");
        src: url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.eot?#iefix")
        format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.woff2")
        format("woff2"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.woff")
        format("woff"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.ttf")
        format("truetype"),
        url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.svg#Euclid Circular B Medium")
        format("svg");
        font-display: swap;
      }

      body {
        background: linear-gradient(to right, #8a2387, #e94057, #f27121);
        color: #fff;
        font-family: "Euclid Circular B Medium", Poppins;
      }

      .navbar-toggler {
        display: none;
      }

      .hero {
        margin-top: 5%;
      }

      .commands {
        margin-top: 100px;
        padding-top: 110px;
        padding-bottom: 120px;
      }

      .commands .title {
        position: relative;
        padding-bottom: 25px;
        text-transform: uppercase;
        font-weight: 700;
        color: white;
      }

      @media only screen and (max-width: 630px) {
        .navbar-toggler {
          display: inherit;
        }

        .nav-links {
          display: none !important;
        }
      }

      #features {
        margin-top: 100px;
      }

      .title-features {
        color: white;
        text-transform: uppercase;
        font-weight: 700;
      }

      .section-features {
        padding-top: 110px;
        padding-bottom: 120px;
        color: white;
      }

      .title {
        background: linear-gradient(to right, #8a2387, #e94057, #f27121);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-decoration: none;
      }

      .section-features .header-section {
        margin-bottom: 35px;
      }

      .section-features .header-section .title {
        position: relative;
        margin-bottom: 40px;
        padding-bottom: 25px;
        text-transform: uppercase;
        font-weight: 700;
      }

      .section-features .header-section .title:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 1px;
        background-color: #f70037;
      }

      .section-features .header-section .title:after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 3px;
        background-color: #f70037;
      }

      .section-features .header-section .title span {
        color: #f70037;
      }

      .section-features .header-section .description {
        color: #6f6f71;
      }

      .section-features .single-service {
        margin-top: 40px;
        background: rgba(255, 255, 255, 0.35);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .section-features .single-service .part-1 {
        padding: 40px 40px 25px;
        border-bottom: 2px solid #1d1e23;
      }

      .section-features .single-service .part-1 i {
        margin-bottom: 25px;
        font-size: 50px;
        color: #f70037;
      }

      .section-features .single-service .part-1 .title {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.8em;
      }

      .section-features .single-service .part-2 {
        padding: 30px 40px 40px;
      }

      .section-features .single-service .part-2 .description {
        margin-bottom: 22px;
        color: white;
        font-size: 14px;
        line-height: 1.8em;
      }

      .section-features .single-service .part-2 a {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
      }

      .section-features .single-service .part-2 a i {
        margin-right: 10px;
        color: #f70037;
      }

      .footer {
        padding: 32px 0;
        position: absolute;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .footer p {
        margin: 0;
        line-height: 26px;
        font-size: 15px;
        color: #fff;
      }

      .footer p a {
        background: linear-gradient(to right, #8a2387, #e94057, #f27121);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-decoration: none;
      }

      .footer p a:hover {
        color: white;
      }
    </style>
  </head>

  <body>
    <section class="main">
      <!-- Navbar -->
      <nav
        class="navbar"
        style="
          overflow: hidden;
          position: fixed; /* Set the navbar to fixed position */
          top: 0; /* Position the navbar at the top of the page */
          width: 100%;
          z-index: 100;
          background: rgba(255, 255, 255, 0.35);
          box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
          backdrop-filter: blur(9px);
          -webkit-backdrop-filter: blur(9px);
          border: 1px solid rgba(255, 255, 255, 0.18);
          height: 10%;
        "
      >
        <div class="container-fluid">
          <a
            class="navbar-brand"
            href="#"
            style="
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <img
              src="/logo.gif"
              alt="Music Bot Logo"
              width="30"
              height="30"
              class="d-inline-block align-text-top"
            />
            Discord Music Bot
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarText"
            aria-controls="navbarText"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="d-flex nav-links">
            <div class="d-flex justify-content-center">
              <a
                class="nav-link active"
                aria-current="page"
                href="/"
                style="color: white"
                >Home</a
              >
              <a class="nav-link" href="#features" style="color: white"
                >Features</a
              >
              <a class="nav-link" href="#commands" style="color: white"
                >Commands</a
              >
            </div>
            <a href="/dashboard" class="btn" type="button" style="color: white">
              Dashboard
            </a>
          </div>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="/">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#features">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#commands">Commands</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->

      <!-- Hero entry 👌 -->
      <div class="hero" style="height: 100vh; width: 100%">
        <div
          id="hero"
          class="text-center"
          style="position: relative; top: 50%; transform: translateY(-50%)"
        >
          <h1>Discord Music Bot</h1>
          <p>
            An advanced discord music bot, supports Spotify, SoundCloud, YouTube
            with Shuffling, Volume Control and Web Dashboard!
          </p>
        </div>
      </div>
      <!-- End Hero -->

      <!-- Features -->
      <div id="features" class="section-features">
        <div class="container">
          <div class="row justify-content-center text-center">
            <div class="col-md-10 col-lg-8">
              <div class="header-section">
                <h2 class="title-features">Exclusive <span>Features</span></h2>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-lg-4">
              <div class="single-service">
                <div class="part-1">
                  <i class="fab fa-spotify"></i> <i class="fab fa-youtube"></i>
                  <i class="fab fa-soundcloud"></i>
                  <h3 class="title">Spotify, Sound Cloud, YouTube Support</h3>
                </div>
                <div class="part-2">
                  <p class="description">
                    Use your spotify playlist, youtube videos, youtube playlists
                    and much more using this bot
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="single-service">
                <div class="part-1">
                  <i class="fas fa-music"></i>
                  <h3 class="title">Lag free music</h3>
                </div>
                <div class="part-2">
                  <p class="description">
                    Bot never lags while playing a song in a voice channel
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="single-service">
                <div class="part-1">
                  <i class="fas fa-sliders-h"></i>
                  <h3 class="title">Server Settings</h3>
                </div>
                <div class="part-2">
                  <p class="description">
                    Control your song looping song or queue, You can even change
                    server prefix and server dj role
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Features -->

      <!-- Commands -->
      <div class="commands" id="commands">
        <div class="container">
          <h2 class="title text-center">Commands</h2>
          <table
            class="table"
            style="
              background: rgba(255, 255, 255, 0.35);
              box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
              backdrop-filter: blur(9px);
              -webkit-backdrop-filter: blur(9px);
              border-radius: 10px;
            "
          >
            <thead>
              <tr>
                <th
                  scope="col"
                  style="
                    background: linear-gradient(
                      to right,
                      #8a2387,
                      #e94057,
                      #f27121
                    );
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                    text-decoration: none;
                  "
                >
                  Command
                </th>
                <th
                  scope="col"
                  style="
                    background: linear-gradient(
                      to right,
                      #8a2387,
                      #e94057,
                      #f27121
                    );
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                    text-decoration: none;
                  "
                >
                  Aliases
                </th>
                <th
                  scope="col"
                  style="
                    background: linear-gradient(
                      to right,
                      #8a2387,
                      #e94057,
                      #f27121
                    );
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                    text-decoration: none;
                  "
                >
                  Usage
                </th>
                <th
                  scope="col"
                  style="
                    background: linear-gradient(
                      to right,
                      #8a2387,
                      #e94057,
                      #f27121
                    );
                    color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                    text-decoration: none;
                  "
                >
                  Description
                </th>
              </tr>
            </thead>
            <tbody id="commands-body" style="color: white"></tbody>
          </table>
        </div>
      </div>
      <!-- End Commands -->
      <!-- Footer -->
      <div class="footer">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="copyright-text">
                <p>
                  ©
                  <a href="//github.com/SudhanPlayz/Discord-MusicBot"
                    >Discord Music Bot</a
                  >. All rights reserved. Made by
                  <a href="//github.com/SudhanPlayz">Sudhan</a> and its
                  <a
                    href="//github.com/SudhanPlayz/Discord-MusicBot/graphs/contributors"
                    >contributors</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Footer -->
    </section>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
      crossorigin="anonymous"
    ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </body>
  <script>
    $(document).ready(() => {
      $.get("/api/info", (data) => {
        //check api/routes.js
        let url = `https://discord.com/oauth2/authorize?client_id=${
          data.ClientID
        }&permissions=${data.Permissions}&scope=${data.Scopes.join(
          "%20"
        )}&redirect_uri=${data.Website}${data.CallbackURL}&response_type=code`;

        $("#hero").append(`
            <a href="/dashboard" class="btn" type="button" style="background: rgba( 255, 255, 255, 0.35 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 9px );
-webkit-backdrop-filter: blur( 9px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );">Dashboard</a>`);
      });

      $.get("/api/commands", (data) => {
        //same as above check it :eyes:
        data.commands.forEach((cmd) => {
          $("#commands-body").append(`
<tr>
  <th scope="row">${cmd.name}</th>
  <td>${cmd.aliases ? cmd.aliases.join(", ") : "None"}</td>
  <td>${cmd.usage ? cmd.usage : "None"}</td>
  <td>${cmd.description ? cmd.description : "None"}</td>
</tr>
`);
        });
      });
    });
  </script>
</html>
